<template>
  <div class="rswiper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper_img" :src="item.imgPath" alt="">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name:"SwiperView",
    data (){
     return{
       swiperOption: {
         loop:true,
         pagination : '.swiper-pagination',
     },
       swiperList:[
         {
           id:"001",
           imgPath:"http://dimg04.c-ctrip.com/images/70070e00000072xwx7F9C_750_150_25.jpg"
         },
         {
           id:"002",
           imgPath:"http://dimg04.c-ctrip.com/images/70060v000000k4anr708B_750_150_25.jpg"
         }
       ]
      }
    }
  }
</script>

<style scoped lang="stylus">
  .rswiper>>>.swiper-pagination-bullet-active
    background:#fff !important
  .rswiper>>>.swiper-container-horizontal > .swiper-pagination-bullets
    bottom :3px
  .rswiper
    width:100%
    overflow:hidden
    height:0
    padding-bottom :20%
    .swiper_img
      width :100%
</style>
